<template>
  <div>
    <div>
      <button @click="downloadExcel">下载用户Excel</button>
      <button @click="pr">打印</button>
    </div>
    <div>
      <el-card style="height: auto">

        <el-form ref="userinfor" label-width="100px" :model="userinfor" :rules="rules" >
          <el-form-item label="头像" prop="avatar">
            <div class="picture-preview" v-if="userinfor.avatar">
              <el-image class="image"
                        :src="userinfor.avatar"
                        fit="cover"></el-image>
            </div>
            <el-upload
                class="picture-uploader"
                action="http://localhost:9090/sys/user/personal/upload"
                :show-file-list="false"
                :on-success="handleUploadSuccess">
              <i class="el-icon-upload picture-uploader-icon"></i>
              <div class="picture-uploader-text">仅允许上传 <i>JPG</i> / <i>PNG</i> 格式的图片</div>
              <div class="picture-uploader-text">仅允许上传不超过 <i>5MB</i> 的图片</div>
            </el-upload>
          </el-form-item>

          <el-form-item label="昵称" prop="nickname">
            <el-input placeholder="请输入昵称"
                      v-model="userinfor.nickname"
                      style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="用户地址" prop="address">
            <el-input
                placeholder="请输入地址"
                v-model="userinfor.address"
                style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="手机号码" prop="phone">
            <el-input
                v-model="userinfor.phone"
                placeholder="请输入手机号码"
                style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input placeholder="请输入邮箱"
                      v-model="userinfor.email"
                      style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="userinfor.sex">
              <el-radio :label="1">男</el-radio>
              <el-radio :label="2">女</el-radio>
            </el-radio-group>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" @click="updateInfor()">保存信息</el-button>
          </el-form-item>
        </el-form>

      </el-card>
    </div>
  </div>
</template>

<script>


export default {

  data() {
    return {

      userinfor: {nickname: "", address: "", avatar: "", phone: "", email: "", sex: ''},
      rules: {
        nickname: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],
        address: [
          {required: true, message: '地址', trigger: 'blur'},
          {min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur'}
        ],

        phone: [
          {required: true, message: '请输入电话号码', trigger: 'blur'},
          {pattern: /^1[3|4|5|7|8][0-9]\d{8}$/, message: '输入正确的手机号', trigger: 'blur'}        ],
        email: [
          {required: true, message: '请输入邮箱', trigger: 'blur'},
          {pattern: /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/, message: '输入正确的邮箱格式', trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'blur'}
        ],
      }

    }
  },
  mounted() {
    this.loadUserInfo()
  },
  methods: {

    loadUserInfo() {

      console.log(localStorage.getItem("currentUserName"))
      let id = localStorage.getItem("currentUserId")


      let url = 'http://localhost:9090/sys/user/personal/infor?id=' + id;
      console.log('url = ' + url);
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.userinfor = jsonResult.data;

        } else {
          let title = '操作失败';
          this.$alert(jsonResult.message, title, {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });

        console.log(error);
      });
    },
    updateInfor() {

      let id = localStorage.getItem("currentUserId");

      let info = {nickname: this.userinfor.nickname, address: this.userinfor.address, avatar: this.userinfor.avatar, phone: this.userinfor.phone, email: this.userinfor.email, sex: this.userinfor.sex};

      console.log(info);

      let url = 'http://localhost:9090/sys/user/personal/update/'+id+'/infor';
      console.log('url = ' + url);

      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .post(url,info).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.$message({
            message: '修改用户成功！',
            type: 'success'
          });
          this.loadUserInfo();

        } else if (jsonResult.state == 40400) {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
              this.loadUserInfo();
            }
          });
        } else {
          this.$alert(jsonResult.message, '操作失败', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      }).catch(error => {
        let title = '错误';
        let message = '程序执行过程中出现错误，请打开浏览器的控制台查看详细错误信息！';
        this.$alert(message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
        console.log(error);
      });
    },


    downloadExcel() {

      let url = "http://localhost:9090/sys/user/export";
      this.axios
          .create({'headers': {'Authorization': localStorage.getItem('localJwt')}})
          .get(url).then((response) => {

        window.location.href =url;
      })
          .catch((error) => {
            console.error('下载失败', error);
          });
    },
    handleUploadSuccess(response) {
      console.log(response)
      if (response.state == 20000) {
        this.userinfor.avatar = response.data.url;
        localStorage.setItem('currentUserAvatar', response.data.url);
      } else {
        let title = '操作失败';
        this.$alert(response.message, title, {
          confirmButtonText: '确定',
          callback: action => {
          }
        });
      }
    },
    pr() {
      window.print();
    }
  }

}


</script>

<style>
.picture-uploader {
  float: left;
  width: 240px;
  height: 135px;
  margin-right: 20px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.picture-uploader .picture-uploader-icon {
  width: 240px;
  height: 80px;
  font-size: 58px;
  color: #8c939d;
  line-height: 80px;
  text-align: center;
}

.picture-uploader .picture-uploader-text {
  width: 240px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-size: 10px;
  color: #8c939d;
}

.picture-uploader .picture-uploader-text i {
  font-size: 10px;
  font-weight: bold;
  font-style: normal;
  color: #F56C6C;
}

.picture-preview {
  width: 240px;
  height: 135px;
  margin-right: 20px;
  border: 1px solid #e8e6e6;
  border-radius: 6px;
  float: left;
  display: inline;
  position: relative;
}

.picture-preview .image {
  width: 240px;
  height: 135px;
  border-radius: 6px;
}
</style>